<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>视频预览 - {{ filename }}</title>

    <!-- 使用 BootCDN 的 Bootstrap -->
    <link href="https://cdifit.cn/cdn/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            text-align: center;
            margin: 0; /* 去掉外边距 */
            font-family: 'Segoe UI', sans-serif;
            background-color: #f4f7f6;
            padding: 2em 0; /* 添加上下内边距 */
        }

        h1 {
            max-width: 100%;
            margin: 0 auto;
            font-size: 2rem;
            color: #333;
            margin-bottom: 1em;
        }

        .video-container {
            max-width: 90%;
            max-height: 90vh;
            margin: 0 auto;
            position: relative;
            overflow: hidden; /* 隐藏超出部分 */
        }

        video {
            width: 100%;
            height: auto;
            border-radius: 15px; /* 圆角效果 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        .settings {
            margin-top: 2em;
            text-align: left;
            max-width: 90%;
            margin: 0 auto;
            padding: 1em;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .settings h2 {
            margin-bottom: 1em;
            color: #333;
            font-size: 1.5rem;
            text-align: center;
        }

        .settings-group {
            display: flex;
            flex-direction: column;
            gap: 1em;
        }

        .settings-group label {
            display: flex;
            align-items: center;
            font-size: 1rem;
            color: #333;
        }

        .settings-button {
            margin-top: 1.5em;
            padding: 0.75em 1.5em;
            font-size: 1.2rem;
            color: #ffffff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s ease;
        }
        
        h1, h2 {
            word-wrap: break-word; /* 处理长单词或标题的换行 */
        }

        .settings-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>视频预览 - {{ filename }}</h1>

    <!-- HTML5 <video> 播放器 -->
    <div class="video-container">
        <video id="my-video" controls>
            <source src="/file/{{ filename }}" type="video/mp4">
            <p>您的浏览器不支持视频标签。</p>
        </video>
    </div>

    <!-- 设置表单 -->
    <div class="settings">
        <p><a href="/file/{{ filename }}" class="btn btn-primary" download>点击下载文件</a></p>
        <h2>播放器设置</h2>
        <div class="settings-group">
            <label>
                <input type="checkbox" id="autoplay" class="setting-input"> 自动播放
            </label>
            <label>
                <input type="range" id="volume" min="0" max="1" step="0.1" class="setting-input"> 音量（0-1）
            </label>
            <label>
                <input type="color" id="themeColor" value="#007bff" class="setting-input"> 主题颜色
            </label>
        </div>
        <button onclick="saveSettings()" class="settings-button">保存设置</button>
    </div>

    <!-- 使用 BootCDN 的 Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

    <script>
        // Cookie 操作函数
        function setCookie(name, value, days) {
            const d = new Date();
            d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
            const expires = "expires=" + d.toUTCString();
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
        }

        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        // 加载用户设置
        function loadSettings() {
            const autoplay = getCookie('autoplay') === 'true';
            const volume = getCookie('volume') || 0.7;
            const themeColor = getCookie('themeColor') || '#007bff';

            document.getElementById('autoplay').checked = autoplay;
            document.getElementById('volume').value = volume;
            document.getElementById('themeColor').value = themeColor;

            const player = document.getElementById('my-video');
            player.autoplay = autoplay;
            player.volume = volume;
            // HTML5 <video> 元素不直接支持更改主题颜色，此处仅示意
            document.getElementById('my-video').style.backgroundColor = themeColor;
        }

        // 保存用户设置
        function saveSettings() {
            const autoplay = document.getElementById('autoplay').checked;
            const volume = document.getElementById('volume').value;
            const themeColor = document.getElementById('themeColor').value;

            setCookie('autoplay', autoplay, 30);
            setCookie('volume', volume, 30);
            setCookie('themeColor', themeColor, 30);

            const player = document.getElementById('my-video');
            player.autoplay = autoplay;
            player.volume = volume;
            // HTML5 <video> 元素不直接支持更改主题颜色，此处仅示意
            document.getElementById('my-video').style.backgroundColor = themeColor;

            alert('设置已保存！');
        }

        // 页面加载时加载用户设置
        window.onload = loadSettings;
    </script>
</body>
</html>
